<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        .box1{
            width:300px;
            height:300px;
            background-color: #ccc;
            margin:0 auto;
        }
        .box2{
            width:120px;
            height:120px;
            background-color: pink;
            position:absolute;
            left:40%;
            top:500px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
    var oDiv1=document.querySelector(".box1");
    var oDiv2=document.querySelector(".box2");
//    oDiv2.onmousedown=function (ev) {
//        ev = ev || event;
//        var oL = oDiv2.offsetLeft;
//        var oR = oDiv2.offsetTop;
//        var ev_left = ev.clientX - oL;
//        var ev_right = ev.clientY - oR;
//        oDiv2.onmousemove = function (ev) {
//            ev = ev || event;
//            oDiv2.style.left = ev.clientX - ev_left + "px";
//            oDiv2.style.top = ev.clientY - ev_right + "px";
//            if (oDiv2.offsetTop > oDiv1.offsetTop && oDiv2.offsetTop < oDiv1.offsetTop + oDiv1.offsetHeight) {
//                oDiv2.style.backgroundColor = "red";
//            }
//        };
//        document.onmouseup = function () {
//            oDiv2.onmousemove = null;
//        }
//    }
    //HTML5做法
oDiv2.ondragstart=function(ev){
    offsetX=ev.offsetX;
    offsetY=ev.offsetY;
}
oDiv2.ondrag=function(ev){
    var x=ev.pageX;
    var y=ev.pageY;
    if(x==0 &&y==0){
        return ;
    }
    x-=offsetX;
    y-=offsetY;

    oDiv2.style.left=x+"px";
    oDiv2.style.top=y+"px";
}
</script>
</body>
</html>